/*
 * @Author: scopesang
 * @Date: 2022-04-07 16:35:40
 * @LastEditors: scopesang
 * @LastEditTime: 2022-04-08 09:18:51
 * @FilePath: \cms-manage\src\textApp\App01.jsx
 * @Description: 
 * 
 * Copyright (c) 2022 by scopesang/大鹏科技, All Rights Reserved. 
 */
import React, { Component } from 'react'

export default class App01 extends Component {

    constructor(props) {
        super(props)
        this.state = {
            num: 0,
            msg: ''
        }
    }

    handleClick() {
        // setState 是异步
        this.setState({
            num: this.state.num + 1
        }, () => {
            console.log(this.state.num);    // hello world
        })
        console.log(this.state.num);
    }

    // changInput(e) {
    //     // currentTarget与target有什么区别？
    //     // 当只有一层元素的时候，两者没区别
    //     // 当存在两层元素嵌套时，就会有冒泡现象，那么真正指向被你事件触发的元素，是currentTarget
    //     console.log(e, "e");
    //     let label = e.target.dataset.field
    //     this.setState({
    //         [label]: e.target.value
    //     }, () => {
    //         console.log(this.state.msg, " this.state.msg");
    //     })
    // }
    changInput(e) {
        // 不bind 的話  他裏面的 this  是空
        let label = e.target.dataset.field
        this.setState({
            [label]: e.target.value
        }, () => {
            console.log(this.state.msg, " this.state.msg");
        })
    }




    addFn() {

    }

    // 只有setState可以重新触发render函数对页面进行再次渲染
    render() {
        return (
            <div>
                <h1>{this.state.username}</h1>
                <h2>{this.state.num}</h2>
                {/* <input data-field="msg" type="text" value={this.state.msg} onChange={this.changInput.bind(this)} /> */}
                <input type="text" data-field="label" value={this.state.label} onChange={this.changInput.bind(this)} />
                <button onClick={this.addFn.bind(this)}>按钮2</button>
            </div>
        )
    }
}


